import React, { useEffect } from 'react';
import { Tooltip, Button } from 'antd';
import { useTRState, TjTable } from '@/pages/ETrade/components';
import styles from '../index.less';
import { TRDefault } from '@/components/index.js';
import { TJModel } from '@/pages/ETrade/components';
import { InfoCircleOutlined } from '#/utils/antdIcons.js';
import reviewSvg from '@/assets/datang/review_analyse.svg';
const TableBox = ({ tables, moreText, fpfx }) => {
  const [state, setState] = useTRState({
    visible: false,
  });
  useEffect(() => {}, []);

  /** methods */
  const onClose = () => {
    setState({
      visible: false,
    });
  };
  return (
    <div>
      <div className={styles.box2}>
        <div className={styles.box1}>
          <div className={styles.hint}>
            <h3>中长期交易情况</h3>
            <Tooltip title={() => <div style={{ whiteSpace: 'pre-wrap' }}>{moreText}</div>}>
              <InfoCircleOutlined style={{ marginLeft: 5, color: '#2978FB', fontSize: 16 }} />
            </Tooltip>
          </div>
          <Button
            style={{ padding: 0, color: '#18A0FB' }}
            type="link"
            icon={<img src={reviewSvg} alt={''} style={{ marginRight: 4 }} />}
            onClick={() => {
              setState({ visible: true });
            }}
          >
            <span style={{ fontSize: 14 }}>复盘分析</span>
          </Button>
        </div>
        <div style={{ margin: '0 24px' }}>
          {tables[0] && tables[0]?.dataSource.length > 0 ? (
            <TjTable {...tables[0]} />
          ) : (
            <TRDefault type="empty" />
          )}
        </div>
      </div>
      <div className={styles.box}>
        <div className={styles.chart1_title}>电力交易执行情况</div>
        {tables[1] && tables[1]?.dataSource.length > 0 ? (
          <TjTable {...tables[1]} />
        ) : (
          <TRDefault type="empty" />
        )}
      </div>
      <TJModel
        title={'复盘分析'}
        visible={state.visible}
        onCancel={onClose}
        width={480}
        footer={[
          <Button key="back" onClick={onClose}>
            取消
          </Button>,
          <Button key="submit" type="primary" onClick={onClose}>
            确定
          </Button>,
        ]}
      >
        <div style={{ whiteSpace: 'pre-wrap' }}>{fpfx}</div>
      </TJModel>
    </div>
  );
};
export default TableBox;
